<template>
  <div class="product_tracing">
    <one-title title="页面标题" @refreshData="handleRefresh">
      <div class="mes_btn">
        <el-button>
          按钮
        </el-button>
      </div>
    </one-title>
    <mes-search :searchList="searchList"
                ref="mesSearch"
                :searchResult="searchCount"
                @searchInfo="handleSearch"
    ></mes-search>
    <div class="table_container">
      <el-table
        :data="listData.list"
        ref="tableNode"
        v-loading="isLoading"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        border
        stripe
        tooltip-effect="dark">
        <mes-column :key="index" v-for="(column, index) in columns" :column="column"></mes-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>
import columns from './columns'

let interFace = 'a/turnoverbatch/turnoverBatch/list'

export default {
  name: 'ProductTracing',
  data() {
    return {
      columns: columns,
      isLoading: false, // 数据加载中
      searchParams: {}, // 查询参数
      sortOrder: {}, // 排序对象
      selectItems: [], // 选中的数据
      searchCount: NaN, // 搜索结果数
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    listData() {
      return this.$store.state.productTracing.listData
    },
    searchList() {
      return [
        {
          label: '搜索字段',
          value: '',
          name: 'number',
          type: 'input'
        }
      ]
    }
  },
  methods: {
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: 15
      }
      let postData = {
        method: 'post',
        url: interFace,
        module: 'productTracing',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: this.searchParams,
          sort: this.sortOrder
        },
        state: 'listData',
      }
      this.$store.dispatch('saveData', postData).then(res => {
        if (Object.keys(this.searchParams).length > 0) {
          this.searchCount = res.count
        } else {
          this.searchCount = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新图标点击
    handleRefresh() {
      this.searchParams = {} // 查询参数
      this.sortOrder = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 搜索按钮点击
    handleSearch(params) {
      this.searchParams = params
      this.init()
    },
    // 排序处理
    handleSortChange(item) {
      this.sortOrder = this.$getSortOrder(item)
      this.init()
    },
    // 选中方法
    handleSelectionChange(val) {
      this.selectItems = val
    }
  }
}
</script>

<style lang="less" scoped>
  .product_tracing {
  }
</style>
